<template>
  <div>
    <div v-red class="box"></div>
    <filter-group :filters="FILTERS" :btns="BTNS" />
    <custom-table :data="list" :columns="COLUMNS" />
  </div>
</template>

<script>
import { reactive } from 'vue';
import * as CONF from './conf';
import tableMixin from '../../mixins/table';
import './main.css';

export default {
  name: 'homepage',
  mixins: [tableMixin],
  // vue3 静态数据挂载到template上
  setup () {
    return reactive({ 
      ...CONF,
      // more state
    });
  },
  directives: {
    red: {
      mounted (el) {
        console.log(el);
        el.setAttribute('style', 'background: red;');
      },
    },
  },
}
</script>
